<template>
  <div>
    <div class="list">
      <div v-for="v in remm" :key="v.id">
        <dl @click="toPost(v.id)">
          <dd>
            <p>
              <b>{{ v.auther }}</b
              >|
              <span>{{ v.datetime }}</span>
            </p>
            <h2>{{ v.title }}</h2>
            <p class="text">
              {{ v.desc }}
            </p>
          </dd>
          <dt><img :src="v.url" alt="" /></dt>
        </dl>
        <el-divider></el-divider>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
  setup() {
    const router = useRouter()
    const store = useStore()
    // 获取vuex state remm 数据
    const remm = computed(() => store.state.remm)
    // 跳转详情页
    const toPost = id => {
      router.push({
        name: 'post',
        params: {
          id
        }
      })
    }
    // 声明周期
    onMounted(() => {
      // 调用vuex actions GET_REMM 获取数据
      store.dispatch('GET_REMM')
    });

    return {
      remm,
      toPost
    };
  }
};
</script>

<style scoped lang="scss">
.list {
  dl {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    dt {
      width: 200px;
      img {
        width: 100%;
      }
    }

    dd {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .text {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>